<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="40%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <!-- :footer="edit || approve" -->
    <template #footer>
      <!-- <div v-if="!approve"> -->
        <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
        <!-- <t-tooltip content="提交后不可再编辑会进入审批流程"> -->
          <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
        <!-- </t-tooltip> -->
      <!-- </div>
      <div v-else>
        <t-button :loading="btnLoading" theme="warning" @click="onSubmitForApprove(0)">退回</t-button>
        <t-button :loading="btnLoading" theme="success" @click="onSubmitForApprove(1)">通过</t-button>
      </div> -->
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="right"
        labelWidth="130px"
        :data="formData"
        ref="form"
        :rules="edit ? rules : {}"
        class="dialog-form"
      >
        <t-form-item label="单位名称" name="deptName">
          <t-input v-if="edit" v-model="formData.deptName" placeholder="请输单位名称"></t-input>
          <span v-else>{{formData.deptName}}</span>
        </t-form-item>
        <t-form-item label="机构性质" name="institutional">
          <t-select v-if="edit" v-model="formData.institutional" :options="dict.type.institutional" placeholder="请选择机构性质" />
          <span v-else>{{formData.institutional|filterByDict(dict.type.institutional)}}</span>
        </t-form-item>
        <t-form-item label="高新技术企业" name="hightechEnterprise">
          <t-radio-group v-if="edit" variant="default-filled" v-model="formData.hightechEnterprise">
            <t-radio-button value="0">否</t-radio-button>
            <t-radio-button value="1">是</t-radio-button>
          </t-radio-group>
          <span v-else>{{formData.hightechEnterprise==='0'?'否':'是'}}</span>
        </t-form-item>
        <t-form-item label="科技型小企业" name="technologyEnterprise">
          <t-radio-group v-if="edit" variant="default-filled" v-model="formData.technologyEnterprise">
            <t-radio-button value="0">否</t-radio-button>
            <t-radio-button value="1">是</t-radio-button>
          </t-radio-group>
          <span v-else>{{formData.technologyEnterprise==='0'?'否':'是'}}</span>
        </t-form-item>
        <t-form-item label="法人性质" name="legalNature">
          <t-select v-if="edit" v-model="formData.legalNature" :options="dict.type.legal_nature" placeholder="请选择法人性质" />
          <span v-else>{{formData.legalNature|filterByDict(dict.type.legal_nature)}}</span>
        </t-form-item>
        <t-form-item label="统一社会信用代码" name="code">
          <t-input v-if="edit" v-model="formData.code" placeholder="请输入统一社会信用代码"></t-input>
          <span v-else>{{formData.code}}</span>
        </t-form-item>
        <t-form-item label="行政代码" name="adminCode">
          <t-input v-if="edit" v-model="formData.adminCode" placeholder="请输入行政代码"></t-input>
          <span v-else>{{formData.adminCode}}</span>
        </t-form-item>
        <t-form-item label="通讯地址" name="address">
          <t-input v-if="edit" v-model="formData.address" placeholder="请输入通讯地址"></t-input>
          <span v-else>{{formData.address}}</span>
        </t-form-item>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
import { getDept } from '@/api/system/dept';

export default {
  name: 'TabUnitBaseInfoForm',
  dicts: ['institutional', 'legal_nature'],
  props: {
    edit: { type: Boolean, default: true },
    // approve: { type: Boolean, default: false },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        deptName: '',
        institutional: '',
        hightechEnterprise: '0',
        technologyEnterprise: '0',
        legalNature: '',
        code: '',
        adminCode: '',
        address: '',
        approveStatus: '1',
      },
      rules: {
        deptName: [{ required: true, message: '单位名称不能为空' }],
        institutional: [{ required: true, message: '机构性质不能为空' }],
        legalNature: [{ required: true, message: '法人性质不能为空' }],
        code: [{ required: true, message: '统一社会信用代码不能为空' }],
        adminCode: [{ required: true, message: '行政代码不能为空' }],
        address: [{ required: true, message: '通讯地址不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    }
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.getMyUnitInfo()
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 新增时添加基础信息
    async getMyUnitInfo() {
      try {
        const { data } = await getDept(this.$store.state.user.deptId)
        this.formData.deptName = data.deptName
        this.formData.code = data.code
        this.formData.address = data.address
      } catch (e) {
        this.$message.error('初始化数据获取失败，请手动初始信息填写！')
      }
      this.formLoading = false
    },
    // 查看和修改时获取详情
    getDetail() {
      this.$api.kjtjdc.table.unitInfo.getInfoById(this.infoId).then(({data}) => {
        this.formData = data;
        this.formLoading = false
      }).catch(e => {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      });
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      this.$api.kjtjdc.table.unitInfo[action](this.formData).then(() => {
        this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
        this.btnLoading = false
        this.$emit('update:visible', false);
        this.$emit('reload');
      }).catch(e => {
        this.$message.error(e)
        this.btnLoading = false
      })
    },
    // async onSubmitForApprove(isApprove) {
    //   this.btnLoading = true
    //   if (isApprove) {
    //     // 通过
    //     this.formData.approveStatus = '3'
    //   } else {
    //     // 退回
    //     this.formData.approveStatus = '4'
    //   }
    //   try {
    //     const { code, msg } = await this.$api.kjtjdc.table.unitInfo.edit(this.formData)
    //     if (code === 200) {
    //       this.$message.success('处理成功')
    //       this.btnLoading = false
    //       this.$emit('update:visible', false);
    //       this.$emit('reload');
    //     } else {
    //       throw msg
    //     }
    //   } catch (e) {
    //     this.$message.error(e)
    //     this.btnLoading = false
    //   }
    // },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.dialog-form ::v-deep.t-form__item {
  border-top: 1px solid #333;
  box-sizing: border-box;
  margin-bottom: 0px;
}
.dialog-form ::v-deep.t-form__item:last-of-type {
  border-bottom: 1px solid #333;
}
.dialog-form ::v-deep.t-form__item .t-form__label {
  border-right: 1px solid #333;
}
.dialog-form ::v-deep.t-form__item .t-form__controls {
  padding-left: 10px;
}
</style>
